<template>
  <div id='views' @click="delShow = false" style="padding-top: 0.25rem;">
<!--    <ul class="selectTab">
      <li class="hoverhand" @click="sltTab(0);sled = 0;" :class="sled == 0 ? 'sled' : ''"><span>银行卡</span></li>
      <li class="hoverhand" @click="sltTab(1);sled = 1;"  :class="sled == 1 ? 'sled' : ''"><span>提币地址</span></li>
    </ul> -->
    <ul v-if="sled == 0" class="allBanks">
      <li v-for="(item,index) in banks" :class="!notCash ? 'hoverhand' : '' ">
        <div>
          <!-------->
          <a href="javascript:void 0;" @click="backCash(item)" v-if="!notCash" :to='{path:"/cash_withdraw",query:{bank:JSON.stringify(item)}}' class="boxshadow width100 hoverhand" replace>
            <p class="name">{{item.bank_name}}</p>
            <p class="master">
              <span class="cardMas">{{item.username}}</span>|<span class="cardNum">尾号：{{item.cut_card_num}}</span>
            </p>
          </a>
          <!--上： 可以跳转提现-->
          <!-------->
          <a v-if="notCash" class="boxshadow width100">
            <p class="name">{{item.bank_name}}</p>
            <p class="master">
              <span class="cardMas">{{item.username}}</span>|<span class="cardNum">尾号：{{item.cut_card_num}}</span>
            </p>
          </a>
          <!--上： 只是显示-->
          <span class="del hoverhand" :class='delShow == true ? "show":"hide"' @click.stop="delItem($event,index)">删&nbsp;除</span>
        </div>
      </li>
    </ul>
    <div v-if="sled == 0">
      <div class='addcard'>
        <a href="javascript:;" @click="toAddbank" >
          <img src="../../common/imgs/bigadd.png" alt="添加">添加提现账号
        </a>
      </div>
      <div class="masterCards">
        <a href="javascript:;" @click.stop='delShow = !delShow'>
          <img src="../../common/imgs/write.png" alt="编辑">管理银行卡
        </a>
      </div>
      <div class="reminder">
        1.最多添加：3张银行卡<br>
        2.添加提现账号后，可提现至当前账号
      </div>
    </div>

    <ul class="ads_list" v-if="sled == 1">
      <li v-for="(item , index ) in addressList">
        <div>
          <p  class="title">
            USDT(OMNI)人人矿场
            <span class="special">OMNI 链</span>
          </p>
          <p class="address">{{item.wallet_address}}</p>
        </div>
      </li>
      <li >
        <div>
          <p  class="title">
            USDT(OMNI)人人矿场
            <span class="special">OMNI 链</span>
          </p>
          <p class="address">
            19fhfuha12uhfashfoahgagjagou1u4gu1gk4
          </p>
        </div>
      </li>
    </ul>
    <dia-log ref="dl" msg="您确定要删除尾号为XXXX的银行卡吗？" @confirm="confirmDel()"></dia-log>
  </div>
</template>

<script>
  import { getBindBanks , delBank , otherAddressList } from '../../http/api';
  export default {
    name: 'my_banks',
    data() {
      return {
        introduce: '我的银行卡/提币地址',
        notCash : this.$route.query.notCash ? true : false ,//不是从提现页面来的需要传参数notCash = true
        sled: this.$route.query.sled || 0,
        banks:[],//银行卡列表
        delShow:false,//是否显示删除按钮滑动
        curLi:'',//删除银行时选择的银行li
        curIndex:'',//删除银行时选择的银行index
        // userName:this.$store.state.name,//用户名称
        addressList : [],//提币地址
      }
    },
    components: {
        DiaLog: resolve => {require(['../../components/dialog'], resolve)},
    },
    mounted(){
      let sled = this.$route.query.sled || 0;
      if(sled == 0){
        this.loadBank();
      }else{
        this.loadAddress();
      }
    },
    methods: {
      backCash( item ){
        this.$store.commit('selectBank', item);
        this.$router.go(-1);
      },
      loadAddress(){
        otherAddressList().then(res => {
          if(res.code == 200){
            this.addressList = res.data.lists;
          }
        });
      },
      loadBank(){
        //获取绑定的银行列表
        getBindBanks().then( res => {
          let data = [];
          if( res.code == 200 ){
            data = res.data;
            let list = data.list;
            for( var i in list){
              let cur = list[i];
              let cardNum = cur.bank_card_num;
              cur.cut_card_num = cardNum.substring( cardNum.length - 4);//切取后的银行后四位
            }
            this.banks = list;
          }
        })
      },
      toAddbank(){
        if( this.banks.length >= 3){
          let toast = require('../../common/js/toast').toast;
          toast('最多只能添加三张银行卡');
        }else{
          this.$router.push({path:'/add_bankcard'})
        }
      },
      delItem: function(e,curindex) {
        //删除
        let curLi = e.currentTarget.parentElement.parentElement;
        this.curLi = curLi;
        this.curIndex = curindex;
        let delToast = `您确定要删除尾号为${this.banks[curindex].cut_card_num}的银行卡吗？`;
        this.$refs.dl.changeToast(delToast);
        this.$refs.dl.dialogShow();
      },
      confirmDel(){
        //确定删除银行卡
        let thiz = this;
        let params = {
          bank_id : thiz.banks[thiz.curIndex]['id'],
        };
        delBank(params).then( res => {
          if( res.code == 200 ){
            if(thiz.$store.state.selectBank){
              let selBank  = JSON.parse( thiz.$store.state.selectBank );
              if( selBank.id === params.bank_id){
                thiz.$store.commit('selectBank' , null);//如果删除的是store的银行卡，则把store中的删除
              }
            }
            let toast = require('../../common/js/toast').toast;
            toast('删除银行卡成功');
            thiz.timeout(function () {
              thiz.curLi.className += ' delThis';
            },600);
            thiz.timeout(function () {
              thiz.curLi.className += ' hideLi';
            },1300);
            thiz.timeout (function () {
              thiz.banks = thiz.arrRemove( thiz.banks , thiz.curIndex);
              thiz.curIndex = '';
              thiz.curLi.className = '';
              thiz.curLi = '';
            },2000);
          }
        });
      },
      sltTab( index ){
        //选择银行卡，提币地址
      },
    },
    destroyed() {
      this.curLi = null;
    }
  }
</script>

<style type="text/less" lang='less' scoped>
  #views{
    padding:0.3rem 0;padding-bottom: 0.36rem;padding-top: 1.1rem;
    .selectTab{
      position: fixed;height: 0.8rem;top:0;left:0;width:100%;background: #fff;z-index: 2;
      -webkit-box-shadow: 0px 0.05rem 0.15rem #eee;
          box-shadow: 0px 0.05rem 0.15rem #eee;
          -moz-box-shadow: 0px 0.05rem 0.15rem #eee;
          -web-kit-shadow: 0px 0.05rem 0.15rem #eee;
      li{
        color:#a2a2a2;font-size: 0.29rem;text-align: center;width: 50%;float: left;
        span{
          height: 100%;line-height: 0.8rem;position: relative;display: inline-block;
        }
      }
      .sled{
        color: #262626;
        span:after{
          content:"";display: inline-block;width:100%;height: 0.04rem;background: #fda825;
          position: absolute;z-index: 1;left:0;bottom: 0;
        }

      }
    }
    @media screen and( min-width:1025px){
      .selectTab{width: 600px;left:50%;margin-left: -300px;}
    }
    .allBanks{
      overflow-x: hidden;
      li{
        padding:0 0.27rem ;padding-bottom: 0.2rem;position: relative;
        div{
          position: relative;overflow: hidden;
          -webkit-box-shadow: 0px 0.05rem 0.15rem #9e9e9e;box-shadow: 0px 0.05rem 0.15rem #9e9e9e; -moz-box-shadow: 0px 0.05rem 0.15rem #9e9e9e; -web-kit-shadow: 0px 0.05rem 0.15rem #9e9e9e;border-radius: 0.04rem;
          >a{
            padding-left: 0.37rem;padding-top: 0.52rem;;display: inline-block;background: url('../../common/imgs/banksbg.png') center top no-repeat;background-size: 100% 100%;height: 2rem;
            -webkit-transition: all 0.2s; transition: all 0.2s;
          }
        }
        .name{
          color: #F8CCA5;font-size: 0.3rem;text-align: left;font-family: 'PingFang-SC-Bold';
        }
        .master{
          padding-top: 0.4rem;color: rgba(248, 204, 165, 0.55);font-size: 0.24rem;text-align: left;
          .cardMas{padding-right: 0.15rem;}
          .cardNum{padding-left: 0.15rem;}
        }
        .del{
          display: inline-block;height: 2rem;line-height: 2rem;font-size: 0.26rem;position: absolute;top:0;right:0;background: #ddb897;
          text-align: center;width: 1.2rem;color: #fff;z-index: 1;;
          -webkit-transition: all 0.2s; transition: all 0.2s;border-top-right-radius: 0.04rem;border-bottom-right-radius: 0.04rem;
          right:-1.2rem;
        }
      }
     li .show{
         transform: translate3d(-1.2rem, 0, 0);
     }
     li .hide{
         transform: translate3d(0, 0, 0);
     }
     .delThis{
       transform: translate3d(-100%, 0, 0);
        -webkit-transition: all 0.4s; transition: all 0.4s;
     }
     .hideLi{
       display: none;
     }
    }
    .addcard{
      padding:0 0.27rem;margin-top: 0.2rem;
      a{
        display: inline-block;width: 100%;text-align: center;line-height: 1rem;vertical-align: middle;background: #fff;height: 1rem;
        img{width: 0.56rem;vertical-align: middle;margin-top: 0.05rem;margin-right: 0.08rem;}
        span{
          line-height: 0.92rem;;
        }
      }
    }
    .masterCards{
       padding:0 0.27rem;margin-top: 0.24rem;
       a{
         display: inline-block;width: 100%;text-align: center;line-height: 1rem;vertical-align: middle;background: none;height: 1rem;border:0.01rem dashed #BFBFBF;
         img{height: 0.26rem;vertical-align: middle;margin-right: 0.1rem;}
         span{
           line-height: 0.92rem;;
         }
       }
    }
    .reminder{
      padding:0 0.27rem;color: #898989;font-size: 0.24rem;padding-top: 0.36rem;line-height: 185%;
    }
    .ads_list{
      li{
        padding: 0 0.27rem;padding-bottom: 0.2rem;position: relative;height: 1.9rem;
        padding-bottom: 0.24rem;
        >div{
          height: 100%;border-radius: 0.04rem;background: #fff;overflow: hidden;
          >.title{
            margin-top: 0.46rem;padding-left: 0.63rem;font-size: 0.3rem;position: relative;line-height: 0.36rem;padding-right: 0.24rem;display: inline-block;width: 100%;
            :before{
              content:'';display: block;width: 0.21rem;height: 0.26rem;position: absolute;left:0.23rem;top:50%;margin-top: -0.13rem;
              background:url("../../common/imgs/address.png") center center no-repeat;background-size: 100% 100%;

            }
          }
          .special{
            height: 0.36rem;line-height: 0.36rem;padding:0 0.08rem;color: #BB800F;font-size: 0.2rem;background:rgba(254, 209, 48, 0.12);display: inline-block;float: right;
          }
          .address{
            color: #B1B1B1;font-size: 0.22rem;padding-left: 0.63rem;padding-top: 0.25rem;padding-right: 2rem;
            overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
          }
        }
      }
      li:last-child{
        padding-bottom: 0;
      }
    }
  }
</style>
